import {
  Card,
  CardContent,
  CardHeader,
  createSvgIcon,
  darken,
  IconButton,
  lighten,
  makeStyles,
  TextField,
  Theme,
  Typography,
} from "@material-ui/core";
import React, { useEffect, useState } from "react";
import EditIcon from "@material-ui/icons/Edit";
// import DoneIcon from "@material-ui/icons/Done";
import ClearIcon from "@material-ui/icons/Clear";
import { I18nItem } from "./types";
import clsx from "clsx";

interface ItemCardProps {
  id: string;
  item: I18nItem;
  updateItem: (id: string, item: I18nItem) => void;
}

const SuccessOutlinedIcon = createSvgIcon(
  <path d="M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z" />,
  "SuccessOutlined"
);

const useStyles = makeStyles((theme: Theme) => {
  const getColor = theme.palette.type === "light" ? lighten : darken;
  return {
    root: {},
    subheader: {
      display: "flex",
      //   justifyContent: "center",
      alignItems: "center",
    },

    translated: {
      color: getColor(theme.palette.success.main, 0.6),
      // color: "#4caf50", // getColor(theme.palette.success.main, 0.6),
    },
  };
});

export default function ItemCard({ id, item, updateItem }: ItemCardProps) {
  const [mode, setMode] = useState<"view" | "edit">(
    item.translated ? "view" : "edit"
  );
  const [value, setValue] = useState<string>(item.defaultMessage);
  const classes = useStyles();

  const handleClick = () => {
    if (mode === "view") {
      setMode("edit");
      return;
    }

    setMode("view");
    // updateItem(key, item);
  };

  const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
    const { key } = event;
    if (key === "Enter") {
      const newItem = {
        ...item,
        translated: true,
        defaultMessage: value,
      };
      updateItem(id, newItem);
      setMode("view");
    }
  };

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  };

  useEffect(() => {
    setValue(item.defaultMessage);
  }, [item.defaultMessage]);

  return (
    <Card className={classes.root}>
      <CardHeader
        action={
          <IconButton aria-label="edit" onClick={handleClick}>
            {mode === "view" && <EditIcon />}
            {mode === "edit" && <ClearIcon />}
          </IconButton>
        }
        subheader={
          <span className={classes.subheader}>
            <SuccessOutlinedIcon
              className={clsx({ [classes.translated]: item.translated })}
            />
            {item.description}
          </span>
        }
      />
      <CardContent>
        <Typography variant="h5" component="h2">
          {mode === "view" && <span>{item.defaultMessage}</span>}
        </Typography>
        {mode === "edit" && (
          <TextField
            onChange={handleInputChange}
            onKeyPress={handleKeyPress}
            fullWidth
            id={id}
            value={value}
          />
        )}
      </CardContent>
    </Card>
  );
}
